<template>
  <PCard class="cri-con" :isCardBorder="false" :shadow="'never'" :isHeadBottomBorder="true"
    :bodyStyle="{ width: '100%' }">
    <div slot="header" class="cri-title">
      <span>注册信息变更</span>
    </div>
    <div class="body">
      <!-- <div class="item">
        经营范围变更
      </div> -->
      <div class="item">
        <a-descriptions v-if="nameShowLabel" :title="nameShowLabel?'变更前':''" bordered :size="'middle'" class="bgq">
          <template v-for="(item) in nameBeforChangeData">
            <a-descriptions-item label="企业名称" :span="3">
              {{ item.Entname }}
            </a-descriptions-item>
          </template>
        </a-descriptions>
        <a-descriptions :title="!nameShowLabel?'变更前':''"  bordered :size="'middle'" class="bgq">
          <template v-for="(item) in BeforeChangeData">
            <a-descriptions-item label="类别">
              {{ item.parentName }}
            </a-descriptions-item>
            <a-descriptions-item label="经营范围" :span="2">
              {{ item.nodeNature }}
            </a-descriptions-item>
            <a-descriptions-item label="相关活动" :span="3" class="endNode">
              {{ item.nodeActivty }}
            </a-descriptions-item>
          </template>
        </a-descriptions>


        <a-descriptions v-if="nameShowLabel" :title="nameShowLabel?'变更后':''" bordered :size="'middle'" class="bgh">
          <a-descriptions-item label="企业名称" :span="3">
            <template v-for="(item) in nameEndChangeData">
              {{ item.Entname }} <br/>
            </template>
          </a-descriptions-item>
        </a-descriptions>


        <a-descriptions :title="!nameShowLabel?'变更后':''"  bordered :size="'middle'" class="bgh">
          <template v-for="(item) in EndChangeData">
            <a-descriptions-item label="类别">
              {{ item.parentName }}
            </a-descriptions-item>
            <a-descriptions-item label="经营范围" :span="2">
              {{ item.nodeNature }}
            </a-descriptions-item>
            <a-descriptions-item label="相关活动" :span="3">
              {{ item.nodeActivty }}
            </a-descriptions-item>
          </template>
          <!-- <a-descriptions-item label="类别">
            商务服务业
          </a-descriptions-item>
          <a-descriptions-item label="经营范围" :span="2">
            会议及展览服务
          </a-descriptions-item>
          <a-descriptions-item label="相关活动" :span="3">
            均使用会议及展览服务的规范表述登记经营范围：科技会展服务；科学技术学术会议服务；科技成果会展服务；前沿科技会展服务；专业技术与产品会展服务；电子、通信产品会展服务；汽车展览服务；机械设备会展服务；数字化会议及展览服务；会展服务活动；旅游会议服务；旅游展览服务；旅游交易会服务；数字化旅游会展服务；体育会展服务活动；体育用品交易会；国内、国际体育会议服务；体育用品博览会、展览会；体育服务类博览会、展览会、论坛；数字体育会展服务；文化会展服务活动；文化会议服务；文化产品展览服务：图书展览服务；集邮展览服务；纪念品展览服务；文化产品交易会；数字创意文化会展服务(以数字图书馆、美术馆、体验馆和智慧博物馆等数字文化场馆为载体的数字文化展示体验服务；数字创意在展览展示领域的应用业态；会议、展览及相关服务活动；国际会议服务；国际组织及政府机构会议服务；国际专业会议服务；国内会议服务；党政会议服务；专业及业务会议服务；会议“组织名称”服务；博览会服务：综合博览会服务；专业博览会服务；生活消费品展览服务：食品展览服务；服装展览服务；家用电器展览服务；家具展览服务；礼仪休闲用品展览服务；贸易洽谈服务；进出口交易会服务；一般商品展销服务；产品订货会服务；林业会展服务；教育展览服务；房地产展览服务；园林博览会展览服务；以提供各种商务会议为主的会议“组织名称”；交易会、展览场馆的管理；专业技术展览；工业品展览（服装、食品、计算机、汽车等）；专业技术展览（农业技术、园林技术、电子技术、通信技术、印刷技术等）；贸易展览（商品交易会、房地产展示会、小商品展览等）；各种技术、商业博览会（艺术品除外）
          </a-descriptions-item> -->
        </a-descriptions>
      </div>
    </div>
  </PCard>
</template>

<script>
export default {
  name: 'sipiChangeRegistrationInformation',
  props: {
    pageInfo: { type: Object, default: () => { } }
  },
  data() {
    return {
      // {lb:'类别',jyfw:'经营范围',nodeActivty:'相关活动'}
      BeforeChangeData: [
        // {parentName:'商务服务业',nodeNature:'广告设计、代理',nodeActivty:`均使用广告设计、代理的规范表述登记经营范围：广告设计；互联网广告；互联网广告设计制作；互联网广告推送商（Ad Network）；互联网广告交易（Ad
        //     Exchange）；互联网广告技术；流动广告展示；广告发送；体育广告；广告代理；传统电视、电影、广播广告；城市广告牌的维护管理；广告策划`},
        // {parentName:'商务服务业',nodeNature:'广告设计、代理',nodeActivty:`均使用广告设计、代理的规范表述登记经营范围：广告设计；互联网广`},
      ],
      EndChangeData: [
        // {parentName:'商务服务业',nodeNature:'广告设计、代理',nodeActivty:`均使用广告设计、代理的规范表述登记经营范围：广告设计；互联网广`},
        // {parentName:'商务服务业',nodeNature:'广告设计、代理',nodeActivty:`均使用广告设计、代理的规范表述登记经营范围：广告设计；互联网广`},
        // {parentName:'商务服务业',nodeNature:'广告设计、代理',nodeActivty:`均使用广告设计、代理的规范表述登记经营范围：广告设计；互联网广`},
        // {parentName:'商务服务业',nodeNature:'广告设计、代理',nodeActivty:`均使用广告设计、代理的规范表述登记经营范围：广告设计；互联网广`},
      ],
      nameBeforChangeData: [
        // { Entname: '企业名称111' }
      ],
      nameEndChangeData: [
        // { Entname: '企业名称111' },
        // { Entname: '企业名称111' },
        // { Entname: '企业名称111' },
      ],
      nameShowLabel: false
    }
  },
  watch: {
    pageInfo: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Object]') {
          const { managePre, managePra, preEntname } = val.dbData
          this.BeforeChangeData = managePre || []
          this.EndChangeData = managePra || []
          // 公司名称
          if (preEntname && preEntname != '') {
            this.nameShowLabel = true
            this.nameBeforChangeData.push({ Entname: preEntname })

            this.nameEndChangeData.push({ Entname: val.dbData.praEntname1 })
            this.nameEndChangeData.push({ Entname: val.dbData.praEntname2 })
            this.nameEndChangeData.push({ Entname: val.dbData.praEntname3 })
            this.nameEndChangeData.push({ Entname: val.dbData.praEntname4 })
            this.nameEndChangeData.push({ Entname: val.dbData.praEntname5 })
          } else {
            this.nameShowLabel = false
          }
        }
      },
      deep: true,
      immediate: true
    },
  },
}
</script>


<style lang="less">
.cri-con {
  box-sizing: border-box;

  .cri-title {
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;

    .item {
      width: 100%;

      .ant-descriptions-bordered .ant-descriptions-item-label {
        background-color: #fafafa;
      }

      .bgq {
        margin: 20px 0;

        .ant-descriptions-view {
          // display:block;
          max-height: 300px;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;

          table {
            tbody {
              .ant-descriptions-row:nth-of-type(even) {
                // border-bottom: 2px solid #aeb0b3 !important;
                border-bottom: 3px solid #e8e8e8 !important;
              }

              .ant-descriptions-row:nth-last-child(1) {
                border-bottom: 1px solid #E6EBF6 !important
              }
            }
          }
        }
      }

      .bgh {
        margin: 10px 0;

        .ant-descriptions-view {
          max-height: 300px;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;

          table {
            tbody {
              .ant-descriptions-row:nth-of-type(even) {
                // border-bottom: 2px solid #aeb0b3 !important;
                border-bottom: 3px solid #e8e8e8 !important;
              }

              .ant-descriptions-row:nth-last-child(1) {
                border-bottom: 1px solid #E6EBF6 !important
              }
            }
          }
        }
      }
    }
  }
}
</style>
